import React from 'react';


class NameCard extends React.Component {
    render() {
        const { name, number, isHuman, tags } = this.props;
        // name = 'asd123'; // props 上的值是不允许被修改的。修改使用 state
        
        return (
            <div className="alert alert-success">
                <h4 className="alert-heading">姓名: { name }</h4>
                <ul>
                    <li>电话: { number }</li>
                    <li>{ isHuman ? '地球人' : '火星人'}</li>
                </ul>
                <p>
                    { tags.map((tag, index) => (
                        <span className="badge badge-pill badge-primary" key={index}>{ tag }</span>
                    ))
                    }
                </p>
            </div>
        )
    }
}

export default NameCard;